<template>
    <div class="page" v-loading="loading">
        <tz-filter @change="filterChange" :filter-data="filterData">
            <template v-slot:default="scope">
                <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.deviceName"
                          placeholder="设备名称"></el-input>
                <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.orgName"
                          placeholder="单位名称"></el-input>
                <el-input class="table-filter-item" :maxlength="100" v-model.trim="scope.data.ipStr" size="small" clearable
                          placeholder="请输入ip地址"></el-input>
<!--                <el-select class="table-filter-item" v-model="scope.data.deviceType" clearable size="small"-->
<!--                           placeholder="请选择设备分类">-->
<!--                    <el-option-->
<!--                            v-for="item in deviceTypeList"-->
<!--                            :key="item.id"-->
<!--                            :label="item.name"-->
<!--                            :value="item.id">-->
<!--                    </el-option>-->
<!--                </el-select>-->
                <el-cascader
                        size="small"
                        clearable
                        class="table-filter-item"
                        v-model="filterData.deviceType"
                        :options="deviceTypeList"
                        placeholder="请选择设备分类"
                        :props="{
                     value: 'key',
                     label: 'keyName'
                 }">
                </el-cascader>
            </template>
        </tz-filter>
        <tz-table
                ref="tzTable"
                highlight-current-row
                size="mini"
                :data="loadData">
            <el-table-column
                    prop="name"
                    show-overflow-tooltip
                    v-if="columnConfigData.includes('设备名称')"
                    label="设备名称">
                <template slot-scope="scope">
                    <high-light :value="scope.row.name || scope.row.ip" :keyword="filterData.deviceName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="deviceType"
                    v-if="columnConfigData.includes('故障设备分类')"
                    label="故障设备分类">
                <template slot-scope="scope">
                    <el-tag
                            size="mini"
                            type="success"
                    >{{deviceTypeMap[scope.row.deviceType.split('\\').shift()] || '-'}}/{{scope.row.deviceTypeTwo}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="ip"
                    show-overflow-tooltip
                    v-if="columnConfigData.includes('ip地址')"
                    label="ip地址">
                <template slot-scope="scope">
                    <high-light :value="scope.row.ip" :keyword="filterData.ipStr"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="resourceGroupName"
                    v-if="columnConfigData.includes('单位名称')"
                    width="80"
                    label="单位名称">
                <template slot-scope="scope">
                    <high-light :value="scope.row.resourceGroupName" :keyword="filterData.orgName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="analysisStatus"
                    width="80"
                    v-if="columnConfigData.includes('解析状态')"
                    label="解析状态">
                <template slot-scope="scope">
                    <el-tag
                            size="mini"
                            :type="scope.row.analysisStatus ? 'success' : ''"
                    >{{scope.row.analysisStatus ? '已解析' : '未解析'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    show-overflow-tooltip
                    v-if="columnConfigData.includes('创建时间')"
                    label="创建时间"
                    :formatter="(row) => {
                       return row.createTime ? moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="analysisTime"
                    show-overflow-tooltip
                    v-if="columnConfigData.includes('分析时间')"
                    label="分析时间"
                    :formatter="(row) => {
                       return row.analysisTime ? moment(row.analysisTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="syncTime"
                    show-overflow-tooltip
                    v-if="columnConfigData.includes('同步时间')"
                    label="同步时间"
                    :formatter="(row) => {
                       return row.syncTime ? moment(row.syncTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot="header">
                    <div class="flex-row flex-item">
                        <div class="flex1">操作</div>
                        <i style="font-size: 18px; cursor: pointer" class="el-icon-s-tools" @click="openColConf"></i>
                    </div>
                </template>
                <template slot-scope="scope">
                    <!--            <el-button @click="handleClick(scope.row)" type="text" size="small">暂停</el-button>-->
                    <el-button v-if="$auth['fault_analysis_delete']" @click="deleteItem(scope.row)" type="text"
                               size="small">删除
                    </el-button>
                    <!--            <el-button @click="handleClick(scope.row)" type="text" size="small">启动</el-button>-->
                    <el-button @click="showResult(scope.row)" type="text" size="small">查看结果</el-button>
                </template>
            </el-table-column>
        </tz-table>
        <el-dialog
                title="故障结果详情"
                :visible.sync="dialogVisible"
                width="1000px"
                style="text-align: left">
            <div class="content-container">
                <template v-if="curRow && curRow.summaryContentList">
                    <h4 class="content-title">故障描述：</h4>
                    <div style="padding-bottom: 20px">
                        <p style="padding: 5px 0" v-for="(text, index) in curRow.summaryContentList" :key="index">
                            {{index + 1}}、{{text}}</p>
                    </div>
                </template>
                <div>
                    <h4 class="content-title">错误原因：</h4>
                    <template v-if="resultObj.faultReason">
                        <p style="padding: 5px 0" v-for="(text, index) in resultObj.faultReason.split('#%&')" :key="index">{{index +
                            1}}、{{text}}</p>
                    </template>
                    <p v-else>暂无</p>
                </div>
                <br>
                <div>
                    <h4 class="content-title">处理建议：</h4>
                    <template v-if="resultObj.suggestions">
                        <p style="padding: 5px 0" v-for="(text, index) in resultObj.suggestions.split('#%&')" :key="index">{{index +
                            1}}、{{text}}</p>
                    </template>
                    <p v-else>暂无</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <column-config ref="columnConf" @onSure="getConfig" :page-key="pageKey"></column-config>
    </div>
</template>
<script>

import moment from 'moment'
import {networks} from '@/assets/dict'
import {mapState} from 'vuex'
import {getStorage} from '@/utils/storage';
import columnConfig from '@/components/columnConfig'

export default {
  name: 'analysis',
  components: {columnConfig},
  data() {
    return {
      moment,
      columnConfigData: null,
      pageKey: 'fault_analysis_page_column_config',
      columnNames: ['设备名称', '故障设备分类', 'ip地址', '单位名称', '解析状态', '分析时间', '创建时间', '同步时间'],
      networks,
      filterData: {
        network: 'JZW',
        deviceType: [],
        deviceName: '',
        orgName: ''
      },
      isEq: 0,
      resultObj: {
        faultReason: '',
        suggestions: ''
      },
      loading: false,
      dwName: '',
      time: '',
      value: '',
      dialogVisible: false,
      ipStr: '',
      curRow: null
    }
  },
  computed: {
    ...mapState('dict', ['deviceTypeList', 'deviceTypeMap']),
  },
  created() {
    this.columnConfigData = getStorage(this.pageKey) || [...this.columnNames]
  },
  methods: {
    openColConf() {
      this.$refs.columnConf.open(this.columnNames)
    },
    getConfig(res) {
      this.columnConfigData = res
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    loadData(params) {
      // const { network, deviceType, orgName, deviceName, ipStr, isEq } = this.filterData
      const { network, deviceType, orgName, deviceName, ipStr } = this.filterData
      return this.$http.get('/fault/analysisPage', {
        params: {
          network,
          deviceType: deviceType[0],
          deviceTypeTwo: deviceType[1],
          orgName,
          deviceName,
          ip: ipStr,
          isEq: this.isEq,
          ...params
        }
      }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取分析列表失败')
      })
    },
    showResult(row) {
      this.loading = true
      this.curRow = row
      this.$http.get('/fault/getAnalysisResult', {
        params: {
          id: row.id
        }
      }).then(res => {
        this.dialogVisible = true
        this.resultObj = res
      }).catch(err => {
        this.$TZmessage.error(err.msg || '加载数据失败')
      }).finally(() => {
        this.loading = false
      })
    },
    deleteItem(row) {
      // this.$confirm('是否删除所选项').then(res => {
      this.$confirm('是否删除所选项').then(() => {
        this.loading = true
        this.$http.delete('/fault/deleteFaultData', {
          params: {
            id: row.id
          }
        // }).then(res => {
        }).then(() => {
          this.$TZmessage.success('删除成功')
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        }).finally(() => {
          this.loading = false
          this.refresh()
        })
      // }).catch(err => {
      }).catch(() => {
        console.log('取消执行')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .home {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        .page-header {
            padding-bottom: 20px;
        }
    }
    .header {
        //height: 69px;
        position: relative;
        text-align: left;
    }

    .content-container {
        .content-title {
            padding-bottom: 10px;
        }
    }

    ::v-deep .el-dialog__body {
        padding: 10px 20px;
        max-height: 60vh;
        overflow: auto;
    }
</style>